<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.3.0.min.css" />

<link rel="stylesheet" type="text/css" href="cantine.css" />

<script type="text/javascript" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>

<title>Wine Town</title>
</head>
<body>

	<div data-role="page" data-page="cantine">
		<script type="text/javascript" src="cantine.js"></script>
		<script type="text/javascript" src="../js/data.js"></script>

		<div data-role="header" data-position="fixed">
			<a data-icon="back" href="../index.html">Indietro</a>
			<h1>Wine Town</h1>
		</div>

		<div id="cantineContent" data-role="content" style="display: none;">
			<ul data-role="listview" id="cantinaListView">
				<li id="cantinaElement" data-prototype="true"><a href="#"></a></li>
			</ul>
		</div>

		<script type="text/javascript">
			var view = {
				add : function(element) {
					$('#cantinaListView').append(element);
				},
				refresh : function() {
					$('#cantinaListView').listview('refresh');
				},
				createEntry : function(label) {
					var cantinaElement = prototype($('#cantinaElement'));
					cantinaElement.find('a').text(label);

					return cantinaElement;
				}
			};
			$('[data-page="cantine"]').on('pageinit', function(event) {
				new CantineController(view).loadCantine();
				showContent();
			});
		</script>

	</div>


</body>
</html>
